<template>
    <div>
      <m-head title="教材介绍"></m-head>
      <div class="list">
        <div class="item" v-for="item of list" :key="item.id" @click="$router.push({path:'bookdetail',query:{id:item.id}})">
          <img :src="item.cover" alt="">
          <div class="info">
            <h3>{{item.title}}</h3>
            <p class="price">价格：￥<span>{{item.price/100}}</span></p>
            <p class="intro">{{item.introduction}}</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import MHead from './MHeader'
import * as info from '../api/info'
export default {
  name: 'book',
  data: function () {
    return {
      list: [
        // {
        //   id: 0,
        //   img: '../../static/images/book.jpg',
        //   name: '旅游英语',
        //   price: '15.00',
        //   author: '张雪峰',
        //   intro: '课程包含了21课内容，通过学习，你能掌握自我介绍，数字应用、订酒店、确认时间、日期、的日常英语沟通，以及开口说话必会的工具箱'
        // },
        // {
        //   id: 1,
        //   img: '../../static/images/book.jpg',
        //   name: '日常英语',
        //   price: '15.00',
        //   uthor: '张雪峰',
        //   intro: '课程包含了21课内容，通过学习，你能掌握自我介绍，数字应用、订酒店、确认时间、日期、的日常英语沟通，以及开口说话必会的工具箱'
        // },
        // {
        //   id: 2,
        //   img: '../../static/images/book.jpg',
        //   name: '酒店英语',
        //   price: '15.00',
        //   uthor: '张雪峰',
        //   intro: '课程包含了21课内容，通过学习，你能掌握自我介绍，数字应用、订酒店、确认时间、日期、的日常英语沟通，以及开口说话必会的工具箱'
        // },
        // {
        //   id: 3,
        //   img: '../../static/images/book.jpg',
        //   name: '商务英语',
        //   price: '15.00',
        //   uthor: '张雪峰',
        //   intro: '课程包含了21课内容，通过学习，你能掌握自我介绍，数字应用、订酒店、确认时间、日期、的日常英语沟通，以及开口说话必会的工具箱'
        // }
      ],
      page:1
    }
  },
  components: {
    'm-head': MHead
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      info.getBookList().then(res => {
        this.list = this.list.concat(res.data)
        console.log(this.list)
        this.page++
      })
    }
  },
}
</script>

<style scoped>
.item{
  display: flex;
  align-items: flex-start;
  padding: .4rem .3rem;
  border-bottom: 1px solid #eee;
}
.item img{
  width: 2.8rem;
  margin-right: .3rem;
}
.info{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.info h3{
  font-size: .44rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #000;
  margin-bottom: 2px;
}
.info .price{
  color: #ed702d;
  font-size: .38rem;
  margin-bottom: .16rem;
}
.info .intro{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: .54rem;
  margin-top: .2rem;
  font-size: .34rem;
}
</style>
